<template>
    <div class="personalinfo">
        <div class="top">
            <span>我的商品</span>
        </div>
        <div class="info">
            <!-- 发布商品 -->
            <div class="putgood">
                <a @click="dialogVisible = true">
                    <div class="gbox">
                        <div class="icon">
                            <img src="../assets/img/add.png" alt="" />
                            <span>上传商品</span>
                        </div>
                    </div>
                </a>
            </div>
            <el-dialog
                title="上传商品"
                :visible.sync="dialogVisible"
                width="30%"
            >
                <el-form>
                    <el-form-item label="商品名称">
                        <el-input
                            v-model="name"
                            name="cName"
                            placeholder="请输入内容"
                            style="width:140px"
                        ></el-input>
                    </el-form-item>
                    <!-- 商品名称name -->

                    <!-- 商品分类value -->
                    <el-form-item label="商品分类">
                        <el-select
                            v-model="value"
                            name="cPtId"
                            placeholder="请选择"
                            style="width: 140px"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 商品数量num -->
                    <el-form-item label="商品数量">
                        <el-input
                            placeholder="数量"
                            name="cCount"
                            style="width: 140px"
                            v-model="num"
                        ></el-input>
                    </el-form-item>
                    <!-- 商品售价price -->
                    <el-form-item label="商品售价">
                        <el-input
                            placeholder="售价"
                            name="cPrice"
                            style="width: 140px"
                            v-model="price"
                        ></el-input>
                    </el-form-item>
                    <!-- 商品描述ds -->
                    <el-form-item label="商品描述"
                        ><el-input
                            type="textarea"
                            name="cDescription"
                            :rows="2"
                            placeholder="描述"
                            style="width: 285px"
                            v-model="description"
                        >
                        </el-input
                    ></el-form-item>

                    <!--商品图片pic -->
                    <el-form-item label="图片">
                        <input
                            type="file"
                            name="file"
                            @change="getFile($event)"
                        />
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="test1($event)"
                        >提 交</el-button
                    >
                </span>
            </el-dialog>
            <!-- 我已发布商品 -->
            <div class="alreadgood">
                <div class="title">我发布的商品</div>
                <div class="concentbox">
                    <div v-for="item in myGoods" :key="item.id" class="boxitem">
                        <img :src="item.src" alt="" />
                        <div>
                            <p>{{ item.price }}</p>
                            <p>{{ item.name }}</p>
                            <p>{{ item.num }}</p>
                        </div>
                    </div>
                    <div class="dowm"></div>

                    <!-- <div style="display: flex; justify-content: flex-end">
                        <span class="demonstration">总数</span>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            layout="total, prev, pager, next"
                            :total="total"
                        >
                        </el-pagination>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: "",
            dialogVisible: false,
            value: "",
            options: [
                {
                    value: 1,
                    label: "裤子",
                },
                {
                    value: 2,
                    label: "衣服",
                },
                {
                    value: 3,
                    label: "帽子",
                },
                {
                    value: 4,
                    label: "包包",
                },
                {
                    value: 5,
                    label: "鞋子",
                },
            ],
            vip: "",
            total: 5,
            page: 1,
            name: "",
            url: "",
            num: "",
            description: "",
            value: "",
            price: "",
            file: "",
            myGoods: [
                {
                    id: 1,
                    src:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1060453240,1808119494&fm=26&gp=0.jpg",
                    name: "熊猫",
                    price: 35,
                    num: 855,
                },
                {
                    id: 2,
                    src:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1060453240,1808119494&fm=26&gp=0.jpg",
                    name: "熊猫",
                    price: 34,
                    num: 245,
                },
                {
                    id: 3,
                    src:
                        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1060453240,1808119494&fm=26&gp=0.jpg",
                    name: "熊猫",
                    price: 123,
                    num: 6,
                },
            ],
        };
    },

    methods: {
        getFile(e) {
            this.file = e.target.files[0];
            console.log(this.file);
        },
        test1(e) {
            e.preventDefault();
            let formData = new FormData();
            formData.append("cName", this.name);
            formData.append("cPrice", this.price);
            formData.append("cCount", this.num);
            formData.append("cAtId", this.value);
            formData.append("cDescription", this.description);
            formData.append("file", this.file);

            //接口
            this.$axios
                .post("http://47.112.119.212:8081/ceshi", formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(function() {
                    console.log("上传成功");
                })
                .catch(function() {
                    console.log("ERROR");
                });
        },

        handleSizeChange(currentSize) {
            this.size = currentSize;
            this.initgoods();
        },
        handleCurrentChange(currentPage) {
            this.page = currentPage;
            this.initgoods();
        },
    },
};
</script>
<style lang="scss" scoped>
.personalinfo {
    width: 100%;
    height: 100%;
}
.top {
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb, #ececec);
    line-height: 60px;
    font-size: 26px;
    color: #333;
    align-items: center;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.info {
    min-height: 500px;
    background-color: #fff;
}
.concentbox {
    display: flex;
    justify-content: flex-start;
    text-align: center;
}

.boxitem img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 80px;
    height: 80px;
}
.putgood {
    width: 100%;
    height: 170px;
    box-sizing: border-box;
    border: 1px solid grey;
    border-style: none none solid none;
    a {
        text-decoration: none;
    }
    a .gbox:hover {
        border-top-color: #00a1d6;
        border-right-color: #00a1d6;
        border-bottom-color: #00a1d6;
        border-left-color: #00a1d6;
        .icon span {
            color: #00a1d6;
        }
    }
}
.gbox {
    width: 260px;
    height: 160px;
    margin-left: 10px;
    cursor: pointer;
    position: relative;
    background: #fff;
    border: 2px dashed #b8c0cc;
    border-top-color: rgb(184, 192, 204);
    border-right-color: rgb(184, 192, 204);
    border-bottom-color: rgb(184, 192, 204);
    border-left-color: rgb(184, 192, 204);
    border-radius: 4px;
    transition: border 0.2s ease;
    box-sizing: border-box;
    text-align: center;
}
.icon {
    img {
        display: block;
        padding-top: 50px;
        margin: 0px auto;
        width: 36px;
        height: 36px;
    }
    span {
        color: grey;
    }
}

.alreadgood {
    .title {
        padding-left: 10px;
        font-size: 20px;
        font-weight: 400;
        line-height: 33px;
        font-family: "微软雅黑";
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    .concentbox {
        box-sizing: border-box;
        height: 300px;
        .boxitem {
            margin-top: 15px;
            margin-left: 10px;
            box-sizing: border-box;
            border: 1px solid black;
            width: 200px;
            height: 250px;
        }
    }
}
</style>
